<template>
  <div class="search-form-wrapper">
    <el-form inline ref="mySearchForm" :rules="rules" :model="searchFields">
      <el-form-item
        v-for="(item, index) in searchForm"
        :key="index"
        :label="item.label + ':'"
      >
        <slot v-if="item.slot"></slot>
        <div v-else>
          <el-date-picker
            v-if="item.type === 'datetime' || item.type === 'date'"
            v-model="searchFields[item.field]"
            :value-format="
              item.type === 'datetime' ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'
            "
            size="mini"
            :type="item.type"
            :placeholder="'请选择' + item.label"
          />
          <el-select
            v-else-if="item.type === 'select'"
            v-model="searchFields[item.field]"
            size="mini"
            :placeholder="'请选择' + item.label"
          >
            <el-option
              v-for="op in item.options"
              :key="op.value"
              :label="op.label"
              :value="op.value"
            />
          </el-select>
          <el-input
            v-else
            v-model="searchFields[item.field]"
            size="mini"
            :placeholder="'请输入' + item.label"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          class="search-btn"
          size="mini"
          type="primary"
          @click="handleSearch"
        >
          搜 索
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SearchForm',
  props: {
    searchFields: { type: Object },
    searchForm: { type: Array },
    rules: Object,
  },
  methods: {
    handleSearch() {
      this.$refs.mySearchForm.validate((valid) => {
        valid && this.$emit('handle-search', valid);
        return valid;
      });
    }
  }
}
</script>

<style lang="scss">
.search-form-wrapper {
  padding: 1em 1em 0;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  .el-form-item {
    margin-bottom: 1em;
    margin-right: 2em;
    &:last-of-type {
        margin-right: 0;
    }
  }
  .el-date-editor.el-input {
    width: 200px;
  }
  .search-btn {
    width: 80px;
  }
}
</style>
